<template>
	<view class="one">
		<view class="steps plt15">
			<u-steps current="0" dot activeColor="rgba(26, 140, 239, 1)">
				<u-steps-item :title="stepsItem1"></u-steps-item>
				<u-steps-item :title="stepsItem2"></u-steps-item>
			</u-steps>
		</view>
		<view class="list">
			<view class="list-call">
				<image class="img" src="/static/shilu-login/8.png"></image>
				<input class="sl-input" v-model="name" type="text" :placeholder="placeholder1" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/7.png"></image>
				<input class="sl-input" v-model="bandnum" type="number" :placeholder="placeholder2" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/cnn.png"></image>
				<input class="sl-input" v-model="cnn" type="number" :placeholder="placeholder3" />
			</view>

			<view class="list-call">
				<image class="img" src="/static/shilu-login/9.png"></image>
				<input class="sl-input" v-model="phone"  type="number" :placeholder="placeholder4" />
			</view>
			<view class="list-call">
				<image class="img" src="/static/shilu-login/10.png"></image>
				<input class="sl-input" v-model="beizhu" type="text" :placeholder="placeholder5" />
			</view>
			<view class="list-call">
<view style="align-items: center;display: flex;"><image class="img" src="/static/shilu-login/14.png"></image><text style="margin-left: 8px;color: grey;">en</text></view>
					<picker @change="bindPickerChange" :value="language" :range="arraylanguage" range-key="name">
										{{arraylanguage[language].name}}
					</picker>
			</view>
			
			<!-- 			<view class="list-call" @click="handlecall">
				<image class="img" src="/static/shilu-login/11.png"></image>
				<text class="picker-label" v-if="Birthday==''">请选择年月日</text>
				<text class="picker-label" v-else>{{Birthday}}</text>
				<u-datetime-picker :show="showTime" v-model="value1" mode="date" @cancel="handleCancel"
					@confirm='confirm' :closeOnClickOverlay='true'></u-datetime-picker>
			</view> -->
		</view>
		<view class="button-login" @tap="bindLogin">
			<text style="font-size: 40upx;">{{$t('text.submit')}}</text>
		</view>
	</view>
</template>

<script>
	var _this, js;
	export default {
		data() {
			return {
				language: 0,
				name: '',
				Birthday: '',
				cnn: '',
				beizhu: '',
				bandnum: '',
				showTime: false,
				phone: '',
				password: '',
				code: '',
				invitation: '',
				agreement: true,
				showPassword: false,
				second: 0,
				iskq: 0,
				value1: Number(new Date()),
				stepsItem1:this.$t('text.tijiaozizhi'),
				stepsItem2:this.$t('text.dengdaishenghe'),
				placeholder1:this.$t('text.input.nickname'),
				placeholder2:this.$t('payee.input.card'),
				placeholder3:this.$t('text.cnn'),
				placeholder4:this.$t('text.input.mobile'),
				placeholder5:this.$t('text.shenqinshuoming'),
				arraylanguage: [{
						name: '简体中文',
						disabled: false,
						value: 'en'
					},
					{
						name: 'Tiếng Việt',
						disabled: false,
						value: 'vi'
					},
					{
						name: 'Indonesia',
						disabled: false,
						value: 'id'
					}, {
						name: 'Malaysia',
						disabled: false,
						value: 'ms'
					}, {
						name: 'ประเทศไทย',
						disabled: false,
						value: 'th'
					}, {
						name: 'English',
						disabled: false,
						value: 'eng'
					}
				],
				
			};
		},
		onLoad(e) {
			if (e.uid) {
				this.invitation = e.uid
			} else {
				var fxpid = uni.getStorageSync("fxpid")
				if (fxpid) {
					this.invitation = fxpid
				}
			}
		},
		onUnload() {
			clearInterval(js)
			this.second = 0;
		},

		computed: {
			yanzhengma() {
				if (this.second == 0) {
					return '获取验证码';
				} else {
					if (this.second < 10) {
						return '重新获取0' + this.second;
					} else {
						return '重新获取' + this.second;
					}
				}
			}
		},
		onUnload() {
			this.clear()
		},
		methods: {
			      bindPickerChange: function(e) {
			            console.log( e)
			            this.language = e.detail.value
			        },
			handlecall() {
				this.showTime = true
			},
			handleCancel() {
				this.showTime = false
			},
			confirm(e) {
				this.Birthday = this.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.showTime = false
			},
			clear() {
				clearInterval(js)
				js = null
				this.second = 0
			},

			async getcode() {
				/* 		if (this.phone.length != 11) {
							uni.showToast({
								icon: 'none',
								title: '手机号不正确'
							});
							return;
						} */
				if (this.second > 0) {
					return;
				}
				this.second = 60;
				//请求业务
				js = setInterval(function() {
					_this.second--;
					if (_this.second == 0) {
						_this.clear()
					}
				}, 1000)
				//if(this.second > 0) return;
				// 请求服务器，发送验证码
				var data = {
					'email': this.phone
				}
				let [err, res] = await this.$httpas.post('/api/ems/send', data);
				if (!this.$httpas.errorCheck(err, res)) return;

				console.log(res.data.ok)
				console.log(res.data.data)
				if (res.data.ok == 1) {
					uni.setStorage({ //缓存配置信息
						key: 'yzmss',
						data: res.data.data
					})
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
				}
			},
			async bindLogin() {
				/* 		
						return */
				let _this = this;
				let data = {
					'bandnum': this.bandnum,
					'name': this.name,
					'phone': this.phone,
					'birthday': this.Birthday,
					'cnn': this.cnn,
					'beizhu': this.beizhu,
					'language': this.language,
				};

				let [err, res] = await this.$httpas.post('/api/creator/ruzhu', data, {
					'token': true
				});
				if (!this.$httpas.errorCheck(err, res)) return;

				if (res.data.code === 1) {
					uni.showModal({
						title: '',
						content: res.data.msg,
						showCancel: false,
						confirmText: this.$t('text.qd'),
						success: function(res) {
							uni.navigateTo({
								url: '/pages/creator/certification/two/two'
							})
						}
					});
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					});
				}
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.header {
		width: 161rpx;
		height: 161rpx;
		background: rgba(63, 205, 235, 1);
		box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47);
		border-radius: 50%;
		margin-top: 30rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.header image {
		width: 161rpx;
		height: 161rpx;
		border-radius: 50%;
	}

	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		color: #fff;
		border-bottom: 0.5px solid #1f1f1f;
	}

	.list-call .img {
		width: 40rpx;
		height: 40rpx;
	}

	.list-call .sl-input {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		margin-left: 16rpx;
	}

	.yzm {
		color: #34FFF0;
		font-size: 24rpx;
		line-height: 64rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: auto;
		height: 64rpx;
		border: 1rpx solid #34FFF0;
		border-radius: 50rpx;
	}

	.yzms {
		color: #999999 !important;
		border: 1rpx solid #999999;
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #34FFF0;
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.button-hover {
		background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
	}

	.agreement {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		margin-top: 80rpx;
		color: #FFA800;
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
	}

	.agreement image {
		width: 40rpx;
		height: 40rpx;
	}

	.picker-label {
		font-size: 17px;
		color: #666;
		margin-left: 10px;
	}

	.selected-date {
		font-size: 14px;
		color: #333;
	}

	::v-deep .steps .u-steps-item__wrapper {
		background: none;
	}

	::v-deep .steps .u-text__value--main {
		color: #fff;
	}
</style>